<template>
  <div>
    <h2>歌曲评分</h2>
    <div>
      <span v-for="star in stars" :key="star" @click="rate(star)" :class="{ 'filled': star <= currentRating }">&#9733;</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentRating: Number,
  },
  data() {
    return {
      stars: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    rate(rating) {
      // 用户点击评分星星时触发的事件，将评分提交给后端
      this.$emit('rate', rating);
    },
  },
};
</script>

<style>
.filled {
  color: gold;
}
</style>
